<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="johnye">
<meta name="copyright" content="">
<meta name="description" content="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link type="text/css" rel="stylesheet" href="youxi/css/common.css">
<link type="text/css" rel="stylesheet" href="youxi/css/aui.css">
<link type="text/css" rel="stylesheet" href="youxi/css/aui2.css">
<link type="text/css" rel="stylesheet" href="youxi/css/end.css">

<link type="text/css" rel="stylesheet" href="youxi/css/plays.css">
<link type="text/css" rel="stylesheet" href="youxi/css/room_pipei.css">
<script type="text/javascript" src="youxi/js/jquery-1.8.2.min.js"></script>

<script>
var ws;
function init() {
	var host = "ws://47.104.8.67:8282";
	try {
		ws = new WebSocket(host);
		ws.onopen = function(){
			console.log('连接成功');
			ws.send("login:{$data.user.id}");
			console.log('发送登陆数据完毕');
		};
		ws.onmessage = function (e) { 

			//监听等待选择游戏类型： gametype-1
			if(e.data.indexOf("gametype")>=0){
				var n=e.data.split("-");
				if(n[1]>0){
					//开始游戏
					$("#content1").hide();
					$("#game_type_img").attr("src","youxi/images/play_icon"+n[1]+".png");
					var game_type_name='';
					if(n[1]==1){
						game_type_name='人在江湖飘';
					}
					if(n[1]==2){
						game_type_name='老虎棒子鸡';
					}
					if(n[1]==3){
						game_type_name='石头剪刀布';
					}
					if(n[1]==4){
						game_type_name='大话骰';
					}
					if(n[1]==5){
						game_type_name='拇指战令';
					}
					if(n[1]==6){
						game_type_name='十五二十';
					}
					$("#game_type_name").html(game_type_name);
					$("#content1a").show();
					//跳转游戏类型页面
					location.href="index.php?ctl=game&act=doing"+n[1]+"&deal_id="+{$data.deal_id}+"&first="+{$data.master};
				}else{
					localStorage.ying=localStorage.ying*1+1;
					localStorage.zhan=localStorage.zhan*1+1;
					//重置master 只需选一个
					$.ajax({
						url:'/wap/index.php?ctl=game&act=ajaxvsresult',
						type:'POST',
						async: false,
						data: 'deal_id={$data.deal_id}&rnum='+ Math.random(),
						dataType: "json",
						success: function(data){
							send("gameend:{$data.vsuser.id}-1");
							window.location.href="";
						},
						error: function(){

						}
					});
				}
			}
			//监听小局上报结果
			if(e.data=="gameend-1"){
				window.location.href="index.php?ctl=game&act=doing&deal_id={$data.deal_id}";
			}
			console.log('监听消息:'+e.data);
		};
		ws.onclose = function (msg) {
			console.log('关闭连接');
		};
	}
	catch (ex) {
		console.log(ex);
	}
}init();

function send(msg) {
	try { 
		ws.send(msg); 
	} catch (ex) { 
		console.log(ex);
	}
}
//刷新或关闭
window.onbeforeunload = function () {
	try {
		//ws.send("loginout:{$data.vsuser.id}-1");
		ws.close();
		ws = null;
	}
	catch (ex) {
		console.log(ex);
	}
};
</script>

</head>

<body>

<header class="header">
 <div class="lf left_menus"><a href="javascript:alert('游戏过程禁止退出');" id="left_menus_cont"><i class="iconfont fontcolor4 f20">&#xe610;</i></a></div>
 <div class="lf logos">房间号：{$data.deal_id}</div>

</header>
<!--header end-->
<div class="main_warp"> 

	<div class="tg_other fixed_top" style="display:none">
		<div class="tg_other_lf lf">
			<img src="{$data.vsuser.user_logo}">
		</div>

		<div class="tg_other_rt rt">
			<ul class="tg_nav">
			<li>名称：<span>{$data.vsuser.user_name}</span></li>
			<li>ID：<span>{$data.vsuser.id}</span></li>
			<li>段位：<span>
			<?
			switch($this->_var['data']['vsuser']['dw']){
				case '1':$dw_name='初入江湖';break;
				case '2':$dw_name='拜师学艺';break;
				case '3':$dw_name='小试牛刀';break;
				case '4':$dw_name='驾轻就熟';break;
				case '5':$dw_name='大显身手';break;
				case '6':$dw_name='炉火纯青';break;
				case '7':$dw_name='出类拔萃';break;
				case '8':$dw_name='技冠群雄';break;
				case '9':$dw_name='出神入化';break;
				case '10':$dw_name='登峰造极';break;
				default:$dw_name='暂无';
			}
			echo $dw_name;
			?>
			</span></li>
			<li>胜率：<span>70%</span></li>     
			<div class="clear"></div>
			</ul>
		</div>

		<div class="clear"></div>  
	</div>
	<div class="jiudiv jiutop" id="vsjiuping"  style="display:none">
		<img src="youxi/images/jiu.png" >
		<img src="youxi/images/jiu.png">
	</div>
	<!--对方 end-->

	<div class="jiudiv jiubottom" id="myjiuping"  style="display:none">
		<img src="youxi/images/jiu.png">
		<img src="youxi/images/jiu.png">
	</div>
	<div class="tg_other fixed_bottom"  style="display:none">
	<div class="tg_other_lf rt">
		<img src="{$data.user.user_logo}">
	</div>

	<div class="tg_other_rt rt">
		<ul class="tg_nav">
		<li>名称：<span>{$data.user.user_name}</span></li>
		<li>ID：<span>{$data.user.id}</span></li>
		<li>段位：<span>
		<?
		switch($this->_var['data']['user']['dw']){
			case '1':$dw_name='初入江湖';break;
			case '2':$dw_name='拜师学艺';break;
			case '3':$dw_name='小试牛刀';break;
			case '4':$dw_name='驾轻就熟';break;
			case '5':$dw_name='大显身手';break;
			case '6':$dw_name='炉火纯青';break;
			case '7':$dw_name='出类拔萃';break;
			case '8':$dw_name='技冠群雄';break;
			case '9':$dw_name='出神入化';break;
			case '10':$dw_name='登峰造极';break;
			default:$dw_name='暂无';
		}
		echo $dw_name;
		?>
		</span></li>
		<li>胜率：<span>70%</span></li>
		<div class="clear"></div>
		</ul>
	</div>

	<div class="clear"></div>  
	</div>
	<!--自己 end-->
		
	<!--游戏界面 0 战斗动画-->
	<div class="pipei  alert-lg re" style="display: none;" id="content0" >
	  <h1 id="zd_number_0"></h1>
	  <img class="vs" src="images/VS.png" alt="">
	  <div class="pipei_center">
		<div class="pipei_blue fl re">
		  <div class="light_blue">
			<img class="" src="images/light_blue.png" alt="">
		  </div>
		  <img class="logo_blue" src="images/logo_blue.png" alt="">
		  <img src="{$data.vsuser.user_logo}" style="width: 30%;margin-top: 25px" alt="">
		  <h2>{$data.vsuser.user_name}</h2>
		  <h2>{$data.vsuser.id}</h2>
		  <h2>胜率:50%</h2>
		</div>
		<div class="pipei_red fr re">
		  <div class="light_red">
			<img src="images/light_red.png" alt="">
		  </div>
		  <img class="logo_red" src="images/logo_red.png" alt="">
		  <img src="{$data.user.user_logo} " style="width: 30%;margin-top: 25px" alt="">
		  <h2>{$data.user.user_name}</h2>
		  <h2>{$data.user.id}</h2>
		  <h2>胜率:50%</h2>
		</div>
	  </div>
	</div>
	<script>
	if (!localStorage.zhan){
		localStorage.zhan=1;
	}
   if (!localStorage.fangqi){
		localStorage.fangqi=0;
	}else{		
		//我掉个酒瓶子
		$(".jiubottom").find("img").each(function(k,v){ 
			if(localStorage.fangqi>k){
				$(v).addClass("jiu");
			}
		});
	}
   if (!localStorage.shu){
		localStorage.shu=0;
	}else{
		//我掉个酒瓶子
		$(".jiubottom").find("img").each(function(k,v){ 
			if(localStorage.shu>k){
				$(v).addClass("jiu");
			}
		});
	}
   if (!localStorage.ying){
		localStorage.ying=0;
	}else{
		//对方掉酒瓶子
		$(".jiutop").find("img").each(function(k,v){ 
			if(localStorage.ying>k){
				$(v).addClass("jiu");
			}
		});
	}
	//小人战斗动画
	function donghua(){
		$(".alert-lg").show();
		$(".pipei_blue").animate({left:"28px"},200,function () {
			$(".logo_blue").css("display","block");
			$(".logo_red").css("display","block");
			$(".vs").show()
			$(".vs").animate({opacity:"1",width:"50%",top:"200",left:"91"},function () {
				$(".light_blue img").hide()
				$(".light_red img").hide()
				$(".pipei h1").show();
				$(".pipei h1").animate({"font-size":"20px",opacity:1,left:"42%",top:"171px"},function () {
					$(".logo_blue").animate({left:"79px"})
					$(".logo_red").animate({right:"79px"})
				})
			})
		});
		$(".pipei_red").animate({right:"28px"},200,function () {
		});
		$(".alert-lg").animate({opcity:0},2000,function () {
			$(".alert-lg").hide();
			$(".light_blue img").show();
			$(".light_red img").show()
			$(".vs").hide();
			$(".pipei h1").hide();
			$(".pipei_blue").css("left","-200px");
			$(".pipei_red").css("right","-200px");
			$(".vs").css({"opacity":"0.2","width":"200%","top":"-202px","left":"-160px"})
			$(".pipei h1").css({"font-size":"120px","opacity":0.2,"left":0,"top":"82px"})
			$(".logo_blue").css("left","30px")
			$(".logo_red").css("right","30px");
			donghua2();
		})
	}
	//正常动画
	function donghua2(){
		$(".fixed_top").show();
		$(".jiutop").show();
		$(".fixed_bottom").show();	
		$(".jiubottom").show();
		setTimeout(function(){ 
			$("#content0").hide();	
			$("#content1").show();
		},500);
	}	
	if (!localStorage.donghua){
		donghua();
		localStorage.donghua=1;
	}else{
		donghua2();
	}
	</script>
	
    <!--游戏页面 1 选择游戏-->
	<div class="play_center_cont plf" id="content1" style="display:none">
		<div class="tishi_title">正在判定优先选择权</div>
		<div class="play_xuanze_warp" >
			<ul class="play_boxs">
			<li class="" type_num=1><a href="#"><img src="youxi/images/play_icon1.png"><span>人在江湖飘</span></a></li>
			<li class="" type_num=2><a href="#"><img src="youxi/images/play_icon2.png"><span>老虎棒子鸡</span></a></li>
			<li class="on_p" type_num=3><a href="#"><img src="youxi/images/play_icon3.png"><span>石头剪刀布</span></a></li>
			<li class="" type_num=4><a href="#"><img src="youxi/images/play_icon4.png"><span>大话骰</span></a></li>
			<li class="" type_num=5><a href="#"><img src="youxi/images/play_icon5.png"><span>拇指战令</span></a></li>
			<li class="" type_num=6><a href="#"><img src="youxi/images/play_icon6.png"><span>十五二十</span></a></li>
			</ul>
			<div class="clear"></div> 
			<div class="queding" ><a href="#" id="queding" onclick="javascript:void(0)"><img src="youxi/images/play_queding.png"></a></div>
		</div>
	</div>
	<input type="hidden" id="data_id" value="{$data.deal_id}"/>
	<input type="hidden" id="game_type" value="3"/>
	<script>
	$('.play_boxs li').click(function(){
		$(".play_boxs").find('li').each(function(k,v){  
			$(v).attr("class","");
		});  
		$(this).attr("class","on_p");
		$("#game_type").val($(this).attr("type_num"));
	});
	</script>
	<script>	   
	<?if($this->_var['data']['master']==$this->_var['data']['user']['id']):?>	
		$(".tishi_title").html("第"+localStorage.zhan+"战，系统判定由我方选择游戏类型<span id='typemiao'> 32</span>s");
		var num=32;       
		var tim1=setInterval(function (){
			num--;         
			$("#typemiao").html(num);
			if(num==0){     
				clearInterval(tim1);	
				//时间到 输小局
				$("#queding").attr("onclick","");
				localStorage.shu=localStorage.shu*1+1;
				localStorage.zhan=localStorage.zhan*1+1;
				send("gametype:{$data.vsuser.id}-0");
			}
		},1000);  
		$("#queding").attr("onclick","begin()");
		function begin(){
			clearInterval(tim1);//停止计时
			send("gametype:{$data.vsuser.id}-"+$("#game_type").val());//告诉对手游戏类型
			//跳转游戏类型页面
			location.href="index.php?ctl=game&act=doing"+$("#game_type").val()+"&deal_id="+{$data.deal_id}+"&first="+{$data.master};
		}
	<?else:?>
		var num=32;       
		var tim1=setInterval(function (){
			num--;         
			$("#typemiao2").html(num);
			if(num==0){     
				clearInterval(tim1);	
			}
		},1000);  
		$(".play_xuanze_warp").hide();
		$(".tishi_title").html("第"+localStorage.zhan+"战，系统判定由对方选择游戏类型<span id='typemiao2'> 32</span>s");
		
	<?endif;?>
	</script>
	<!--游戏页面-->
	<div class="play_center_cont plf" id="content1a" style="display:none;">
		<div class="ant_sure" style="margin-top: 82px;">
			<img id="game_type_img" src="youxi/images/play_icon1.png"/>
		</div>
		<div class="zd_number" id="game_type_name" style="margin-top: 26px;">null</div>
		<h1 style="color: white;text-align: center;margin-top: 100px;"><strong>游戏开始</strong></h1>
	</div>
	   
</div>  
</body>
</html>